//我的
'use strict'
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ListView,
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';
import NavigatorBar from '../components/NavigatorBar';


const data = [
  ['bank', '收银员@'], ['qrcode', '收款二维码'], ['cog', '设置'],
  ['question-circle', '常见问题'], ['home', '关于我们'],
];

export default class MineContainer extends Component {
  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data),
    }
  }
  _push(rowID) {
    switch(rowID) {
      case '1': {
        Actions.receiptQRCode();
        break;
      }
      case '2': {
        Actions.mySetting();
        break;
      }
      case '3': {
        Actions.commonProblem();
        break;
      }
      case '4': {
        Actions.aboutUs();
        break;
      }
    }
  }
  _renderRow(rowData, sectionID, rowID) {
    if (rowID === '0') {
      return (
        <View style={styles.row0} id={rowID}>
          <Icon name={rowData[0]} color={defaultStyles.LIGHTBLUE} size={32.5} style={{marginLeft: 20}}/>
          <View style={{flexDirection: 'column', justifyContent: 'center'}}>
            <Text style={[styles.rowText, {fontSize: 15}]}>{rowData[1] + uname}</Text>
            <Text style={[styles.rowText, {fontSize: 15}]}>13000000000</Text>
          </View>
        </View>
      );
    }
    else if  (rowID === '1' || rowID === '2') {
      return (
        <TouchableOpacity style={[styles.row1_2, {marginBottom: rowID === '2' ? 20 : 0}]} id={rowID}
                          onPress={() => this._push(rowID)}>
          <Icon name={rowData[0]} color={defaultStyles.LIGHTBLUE} size={22.5} style={{marginLeft: 20}}/>
          <Text style={styles.rowText}>{rowData[1]}</Text>
          <View style={styles.rowArrow}>
            <Text style={{fontSize: 22, color: 'gray'}}>
              {'>'}
            </Text>
          </View>
        </TouchableOpacity>
      );
    }
    else {
      return (
        <TouchableOpacity style={styles.rowOthers} id={rowID} onPress={() => this._push(rowID)}>
          <Icon name={rowData[0]} color={defaultStyles.LIGHTBLUE} size={22.5} style={{marginLeft: 20}}/>
          <Text style={styles.rowText}>{rowData[1]}</Text>
          <View style={styles.rowArrow}>
            <Text style={{fontSize: 22, color: 'gray'}}>
              {'>'}
            </Text>
          </View>
        </TouchableOpacity>
      );
    }
  }
  render () {

    return (
      <View style={styles.view}>
        <NavigatorBar title="我的" navBarColor={defaultStyles.LIGHTBLUE} />
        <View style={styles.bottomView}>
          <ListView dataSource={this.state.dataSource}
                    renderRow={(rowData, sectionID, rowID,) => this._renderRow(rowData, sectionID, rowID)}
                    style={styles.list}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
  },
  navBar: {
    flexDirection: 'row',
    height: defaultStyles.OS === 'ios' ? 64 : 44,
    backgroundColor: defaultStyles.LIGHTBLUE,
  },
  navBarTitle: {
    flex: 1,
    marginTop: defaultStyles.OS === 'ios' ? 30 : 10,
    alignItems: 'center',
  },
  bottomView: {
    flex: 11,
    backgroundColor: defaultStyles.WHITEOFBACKGROUND,
  },
  list: {
    flex: 1,
  },
  row0: {
    flexDirection: 'row',
    height: 65,
    marginTop: 10,
    backgroundColor: 'white',
    borderColor: defaultStyles.WHITEOFBACKGROUND,
    borderWidth: 0.5,
    alignItems: 'center',
  },
  row1_2: {
    flexDirection: 'row',
    height: 45,
    marginTop: 20,
    backgroundColor: 'white',
    borderColor: defaultStyles.WHITEOFBACKGROUND,
    borderWidth: 0.5,
    alignItems: 'center',
  },
  rowOthers: {
    flexDirection: 'row',
    marginTop: 0,
    height: 45,
    backgroundColor: 'white',
    borderColor: defaultStyles.WHITEOFBACKGROUND,
    borderWidth: 0.5,
    alignItems: 'center',
  },
  rowText: {
    fontSize: 16,
    marginLeft: 20,
  },
  rowArrow: {
    flex: 1,
    alignItems: 'flex-end',
    marginRight: 20,
  },
});